<template>
  <el-form :inline="true" class="demo-form-inline" label-width="80px" ref="from2">
    <el-form-item label="分类名称" prop='name'>
      <el-input placeholder="请输入分类名称" clearable v-model="showform.name" />
    </el-form-item>
    <el-form-item label="所属店铺" style="width: 240px;">
      <el-select placeholder="所属店铺" v-model="showform.shop">
        <el-option label="公共商品" value="公共商品" />
        <el-option label="海口解放路店" value="1" />
        <el-option label="海口永万路店" value="2" />
        <el-option label="海口长彤路店" value="3" />
        <el-option label="海口国库路店" value="4" />
        <el-option label="海口国贸路店" value="5" />
        <el-option label="海口海甸岛店" value="6" />
        <el-option label="海口解放路店" value="7" />
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select placeholder="状态" clearable v-model="state">
        <el-option label="启动" value="1" />
        <el-option label="禁用" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item>
    </el-form-item>
    <el-button type="primary" color="#00acac" style="margin-left:10px;" @click="chaxun"><el-icon>
        <Search />
      </el-icon>搜索</el-button>
    <el-button class="chong"><el-icon>
        <Refresh />
      </el-icon>重置</el-button>
    <el-button type="primary" plain color="#00acac" @click="showAddDialog = true">
      <el-icon>
        <Plus />
      </el-icon>新增
    </el-button>
  </el-form>
  <!-- 列表 -->
  <el-table :data="list" height="450px">
    <el-table-column label="分类id" prop="id" />
    <el-table-column label="所属店铺" prop="sort">
      <template #default="{ row }">
        {{ showsort(row.unit) }}
      </template>
    </el-table-column>
    <el-table-column label="名称" prop="name" />
    <el-table-column label="图片" prop="img">
      <template #default="{ row }">
        <img :src="row.img" alt="" width="50" height="50">
      </template>
      <!-- el-table-cloumn 可以使用默认插槽  这个插槽提供了一个
          插槽作用域 方便我们来获取当前行的所有信息 以便我们进行自定义的展示
        -->
      <!-- 创建时间 -->
    </el-table-column>
    <el-table-column label="创建时间" prop="creationTime">
      <template #default="{ row }"> {{ formatTime(row.createdAt) }}</template>
    </el-table-column>
    <el-table-column label="更新时间" prop="turnoverTime">
      <template #default="{ row }"> {{ formatTime(row.updatedAt) }}</template>
    </el-table-column>
    <el-table-column label="状态" prop="state">
      <template #default="{ row }">
        <!-- 状态按钮 -->
        <el-switch v-model="row.state" class="ml-2" :active-value="1" :inactive-value="0" :before-change="()=>changestate(row, row.state, row.id)" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <div class="but">
          <span @click="openEdit({ ...row })"> <el-icon>
              <Edit />
            </el-icon>编辑</span>
          <span @click="handleDel(row.id)"><el-icon>
              <Delete />
            </el-icon>删除</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination background layout="total,prev, pager, next, sizes, next, jumper" :total="total"
    :default-page-size="limit" :current-page="page" @size-change="handeSizeChange" @current-change="handlePageChange" />
  <!-- 弹窗 -->
  <el-dialog v-model="showAddDialog" title="新增商品分类" class="beijing" width="800px">
    <!-- :rules="rules" 检验是否有 prop的值 -->
    <!-- addfrom 验证表单 是否全部完成验证 -->
    <el-form ref="addfrom" label-width="150px" class="form" :model="shangbiao" :rules="rules">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="shangbiao.name" />
      </el-form-item>
      <el-form-item label="所属店铺" prop="shop">
        <el-select placeholder="所属店铺" clearable v-model="shangbiao.shop">
          <el-option label="公共商品" value="0">公共商品</el-option>
          <el-option label="海口解放路店" value="1">海口解放路店</el-option>
          <el-option label="海口永万路店" value="2">海口永万路店</el-option>
          <el-option label="海口长彤路店" value="3">海口长彤路店</el-option>
          <el-option label="海口国库路店" value="4">海口国库路店</el-option>
          <el-option label="海口国贸路店" value="5">海口国贸路店</el-option>
          <el-option label="海口海甸岛店" value="6">海口海甸岛店</el-option>
          <el-option label="海口解放路店" value="7">海口解放路店</el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="shangbiao.sort" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注信息" prop="bei">
        <el-input v-model="shangbiao.bei" :rows="2" type="textarea" placeholder="输入内容" />
      </el-form-item>
      <el-form-item label="上传图片" prop="img">
        <el-upload list-type="picture-card" name="file" action="http://www.wzsqyg.com/attachment/upload"
          class="avatar-uploader" v-model:file-list="fileList" :on-success="UploadOk">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>

      </el-form-item>
      <el-form-item label="状态" prop="state">
        <!-- 单选 -->
        <el-radio-group v-model="shangbiao.state">
          <el-radio :label="1" name="state">启动</el-radio>
          <el-radio :label="0" name="state">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd" class="bb">确定</el-button>
        <el-button @click="showAddDialog = false" class="quxiao">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 编辑 -->
  <el-dialog v-model="showbianji" title="修改商品" class="ff" width="800px">
    <el-form label-width="150px" class="state" :rules="rules" ref="addfrom" model="editGoods">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="editGoods.name" />
      </el-form-item>
      <el-form-item label="所属店铺" prop="shop">
        <el-select placeholder="所属店铺" clearable v-model="editGoods.shop">
          <el-option label="公共商品" value="0">公共商品</el-option>
          <el-option label="海口解放路店" value="1">海口解放路店</el-option>
          <el-option label="海口永万路店" value="2">海口永万路店</el-option>
          <el-option label="海口长彤路店" value="3">海口长彤路店</el-option>
          <el-option label="海口国库路店" value="4">海口国库路店</el-option>
          <el-option label="海口国贸路店" value="5">海口国贸路店</el-option>
          <el-option label="海口海甸岛店" value="6">海口海甸岛店</el-option>
          <el-option label="海口解放路店" value="7">海口解放路店</el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="editGoods.sort" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注信息" prop="bei">
        <el-input v-model="editGoods.bei" :rows="2" type="textarea" placeholder="输入内容" />
      </el-form-item>
      <el-form-item label="图片" prop="img" v-model="editGoods.img">
        <el-upload
          list-type="picture-card"
              name="file"
              action="http://www.wzsqyg.com/attachment/upload"
              class="avatar-uploader"
              v-model:file-list="fileList"
              :on-success="bianUploadOk"
              :http-request="handleUpload"
          >
          <el-icon ><Plus /></el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <!-- 单选 -->
        <el-radio-group v-model="editGoods.state">
          <el-radio :label="1" name="state">启动</el-radio>
          <el-radio :label="0" name="state">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleEidt" class="bb">确定</el-button>
        <el-button @click="showbianji = false" class="quxiao">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" src="./fenlei"></script>
<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
<style>
.demo-form-inline {
  background-color: gainsboro;
  border-radius: 10px;
  margin: 0 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

/* 外层背景 */
.beijing {
  height: 720px;
  color: white;
  background-color: cadetblue;
}

.el-dialog__title {
  color: white;
}

/* 内层背景 */
.form {
  padding-top: 20px;
  padding-right: 50px;
  height: 600px;
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: space-between;
}

/* 图标X */
.el-icon svg {
  color: #606266;
}

.el-form-item__label {
  color: #606266;
  font-weight: 800;
  /* padding: 0; */
  margin: 0;
  justify-content: none;
}

.chong:hover {
  color: white;
  background-color: #00acac;
}

label.style {
  width: 10px;
}

/* 编辑按钮 */
.but {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.but>span {
  color: #00acac;
}

/* 图片样式 */
/* 分页颜色 */
.el-pagination.is-background .el-pager li.is-active {
  color: white;
  background-color: #00acac;
}

/* 图片 */
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}

/* 标题 */
.el-form-item__label {
  padding-left: 10px;
}

/* 系统提示 */
.el-dialog__title {
  color: black;
}

.state {
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: white;
  width: 760px;
}

.ff {
  background-color: #00acac;
}

/* 启动 */
.qidong {
  width: 600px;
}

.qidong>.qi {
  width: 500px;
}

/* 单选按钮颜色 */
.el-radio__input.is-checked+.el-radio__label {
  color: #00acac;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: #00acac;
  color: #00acac;
}

.quxiao:hover {
  background-color: #00acac80;
  color: #00acac;
}

.el-switch__core {
  background-color: none;
}

.el-switch.is-checked .el-switch__core {
  background-color: #00acac;
  border: none;
}

/* 按钮 */
.bb {
  background-color: #00acac;
  border: none;
}

.bb:hover {
  background-color: #00acacab;
}
/*  */
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
